<template>
	<div class="page-editor editor-wrapper" v-loading="loading">
		<!--左侧导航-->
		<div class="page-editor-side-bar">
			<div class="item left">
				<scene-list :list="scenes" :selected-id="currSceneUUID" />
				<div class="scene-footer">
					<i class="iconfont icon-add" @click="onRequestScenesChange({ cmd: 'add', dialog: false })"></i>
					<div class="iconfont el-icon-s-management zjmb" @click="zjmb"></div>
				</div>
			</div>
			<widget-list :list="widgetlist" />
		</div>
		<div class="page-editor-main">
			<editor-panel :scale="scaleValue" />
		</div>
		<!--属性编辑区域-->
		<div class="el-attr-edit-wrapper">
			<attr-side-panel />
		</div>
		<el-dialog class="xFuploadBox" :title="uploadTypeName + '上传'" width="85%" :modal="true" :before-close="dialogClose" :visible.sync="_showMaterial">
			<file-manager @on-upload="getMutations" @quxiaoConfirm='quxiaoConfirm' @on-confirm="onFilesConfirm" :type="cid" />
		</el-dialog>
		<!-- <el-dialog class="elDialog" title="预览" width="90%" :modal="true" :show-close="false" v-if="_showPreview" :visible.sync="_showPreview">
			<preview-popup :id="pageData.id" />
		</el-dialog> -->
		<div class="zjmbDialog" v-if='zjmbDialogShow'>
			<div class="popups-body">
				<div class="popups-header">
					<h1 class="title">模板中心</h1>
				</div>
				<div class="popups-footer">
					<el-button size="small" @click='zjmbDialogquxiao'>取消</el-button>
					<el-button type="primary" class='marR20' size="small" @click='zjmbDialogsure'>确定</el-button>
				</div>
				<div class="search-bar">
					<el-input placeholder="请输入内容" v-model="searchInputData">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</div>
			</div>

		</div>
		<div class="yulanDialog" v-if="_showPreview">
			<div class="yulanDialogInner">
				<preview-popup :id="pageData.id" />
				<div class="yulanDialogInnerRight" >
					<div class="exitBtn bgColor808695 top10" @click="prevScene()">上一页</div>
					<div class="exitBtn bgColor808695 top100" @click="nextScene()">下一页</div>
					<div class="exitBtn bgColored4014" @click="exitBtn">退出</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
	import WidgetList from '@/components/program-editor/widget-list';
	import SceneList from '@/components/program-editor/scene-list';
	import editPanelMixin from '@/mixins/edit-pannel-mixin';
	export default {
		components: {
			'attr-side-panel': () =>
				import('@/components/program-editor/attr-side-panel'),
			'editor-panel': () =>
				import('@/components/program-editor/editor-panel'),
			'file-manager': () =>
				import('@/components/program-editor/file-manager'),
			'preview-popup': () =>
				import('@/components/program-editor/preview-popup'),
			WidgetList,
			SceneList
		},
		data() {
			return {
				loading: false,
				searchInputData: '',
				zjmbDialogShow: false
			};
		},
		computed: {
			...mapState('programs', ['scaleValue', 'widgetlist', 'scenes', 'currSceneUUID', 'showMaterial', 'showPreview', 'pageData', 'currBeforeElement']),
			...mapState('material', ['selectedList', 'propName', 'cid']),
			...mapGetters('programs', ['hasCurrElement', 'currElement', 'currScene']),
			...mapGetters('material', ['uploadTypeName']),
			_showMaterial: {
				get() {
					return this.showMaterial;
				},
				set(val) {
					this.setShowMaterial(val);
				}
			},
			_showPreview: {
				get() {
					return this.showPreview;
				},
				set(val) {
					this.setShowPreview(val);
				}
			}
		},
		watch: {
			showMaterial(v1, v2) {
				if(!v1) {
					this.clearMaterialData();
				} else {
					this.getMutations();
				}
			},
			pageData: {
				deep: true,
				handler(v1, v2) {
					if(v1 && v1.id && v2 && v2.id && v1.id !== v2.id) {
						this.$router.replace({
							name: 'programs-edit',
							params: {
								status: 'new',
								id: v1.id
							}
						});
					}
				}
			}
		},
		mixins: [editPanelMixin],
		created() {
			const {
				id
			} = this.$route.params;
			if(id) {
				this.getProgramInfo(id * 1);
			}
		},
		mounted() {},
		methods: {
			exitBtn(){
				this._showPreview=false;
			},
			 ...mapMutations('programs', ['prevScene', 'nextScene']),
			...mapMutations('programs', ['setShowMaterial', 'updateSceneStyle', 'updateScenePropValue', 'updateElementStyle', 'updatePropValue', 'setShowPreview', 'setCurrElementUUID', 'setCurrAttrPannelIndex', 'setCurrBeforeElement']),
			...mapMutations('material', ['clearMaterialData']),
			...mapActions('programs', ['getProgramInfo', 'setCurrentElement', 'setDurationLen', 'deleteElment', 'setDestroyedState']),
			...mapActions('material', ['getMutations']),
			zjmb() {
				this.zjmbDialogShow = !this.zjmbDialogShow;
			},
			zjmbDialogquxiao() {
				this.zjmbDialogShow = false;
			},
			zjmbDialogsure() {
				this.zjmbDialogShow = false;
			},
			quxiaoConfirm() {
				this._showMaterial = false;
			},
			dialogClose(done) {
				let that = this;
				if(this.currScene.elements.length > 0) {
					this.currScene.elements.forEach(function(item) {
						if(item.elName === 'sxc-image') {
							if(item.propsValue.imageSrcList) {
								if(item.propsValue.imageSrcList.length <= 0) {
									that.setCurrElementUUID(item.uuid);
									that.deleteElment();
								}
							}
						}
						if(item.elName === 'sxc-video') {
							if(item.propsValue.videoList) {
								if(item.propsValue.videoList.length <= 0) {
									that.setCurrElementUUID(item.uuid);
									that.deleteElment();
								}
							}
						}
						if(item.elName === 'sxc-document') {
							if(item.propsValue.docSrcList) {
								if(item.propsValue.docSrcList.length <= 0) {
									that.setCurrElementUUID(item.uuid);
									that.deleteElment();
								}
							}
						}
						if(item.elName === 'sxc-audio') {
							if(item.propsValue.bgAudioList) {
								if(item.propsValue.bgAudioList.length <= 0) {
									that.setCurrElementUUID(item.uuid);
									that.deleteElment();
								} else {
									that.setCurrElementUUID('');
									that.setCurrAttrPannelIndex('1');
								}
							}
						}
					});
				}
				done();
			},
			onFilesConfirm(ev) {
				let that = this;
				const {
					propName
				} = this;
				let filelists = Object.keys(this.selectedList).map(k => {
					return that.selectedList[k]
				});
				let currEleArr = that.currElement ? that.currElement : that.currBeforeElement;
				filelists.forEach(function(item, index) {
					let elementsArr = {};
					if(currEleArr) {
						if(currEleArr.elName === 'sxc-image') {
							let itemArr = currEleArr.propsValue.imageSrcList.find(res => {
								return res.id === item.id;
							});
							if(itemArr) {
								that.selectedList[item.id].animateInfo = itemArr.animateInfo;
								that.selectedList[item.id].animateInfoAll = itemArr.animateInfoAll ? itemArr.animateInfoAll : {
									imgSwitchTime: 2,
									imgAnimates: ''
								};
								that.selectedList[item.id].switchType = itemArr.switchType ? itemArr.switchType : false;
							} else {
								if(currEleArr) {
									if(currEleArr.propsValue.imageSrcList.length > 0) {
										let itemArr = currEleArr.propsValue.imageSrcList[0];
										filelists[index].animateInfo = itemArr.switchType ? itemArr.animateInfoAll : {
											imgSwitchTime: 2,
											imgAnimates: ''
										}
									}
								}
							}
						}
					}
				})
				if(!Object.keys(propName).length) {
					return;
				}
				const key = Object.keys(propName)[0];
				let filelist = Object.keys(this.selectedList).map(k => {
					return this.selectedList[k].filePath;
				});
				let items = Object.keys(this.selectedList).map(k => {
					return this.selectedList[k];
				});
				items = items.sort((a, b) => a.tmp - b.tmp);
				let hasElementId = this.hasCurrElement;
				if(
					key === 'propsValue' &&
					(this.propName[key] === 'imageSrcList' || this.propName[key] === 'videoList' || this.propName[key] === 'docSrcList' || this.propName[key] === 'bgAudioList')
				) {
					if(!hasElementId) {
						if(this.currBeforeElement.uuid) {
							this.setCurrElementUUID(this.currBeforeElement.uuid);
						} else {
							this.setCurrElementUUID(hasElementId);
						}
					}
					if(Object.keys(this.selectedList).length <= 0) {
						this.deleteElment();
						this.setCurrElementUUID('');
					}
				}
				if(!this.hasCurrElement) {
					if(key === 'commonStyle') {
						// 设置场景样式
						let val = {};
						val[this.propName[key]] = filelist[0];
						this.updateSceneStyle(val);
					} else {
						let val = {};
						val[this.propName[key]] = filelist;
						this.updateScenePropValue(val);
					}
				} else {
					if(key === 'commonStyle') {
						// 设置场景样式
						let val = {};
						val[this.propName[key]] = filelist[0];
						this.updateElementStyle(val);
					} else {
						let val = {};
						val[this.propName[key]] = [...items];
						this.updatePropValue(val);
					}
				}
				if(this.propName[key] === 'bgAudioList') {
					this.setCurrElementUUID('');
					this.setCurrAttrPannelIndex('1');
				}
				this.setShowMaterial(false);
				that.setDurationLen();
				that.setCurrBeforeElement();
			}
		},
		destroyed: function() {
			this.setDestroyedState();
		}
	};
</script>
<style lang="scss" scoped>
	@import '../../../assets/scss/_variables';
	.marR20 {
		margin-right: 20px;
	}

	.exitBtn {
		padding: 14px 8px;
		width: 32px;
		height: 64px;
		color: #fff;
		border-radius: 5px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	.bgColored4014{
		background-color: #ed4014;
		position: absolute;
		left: 0;
		bottom: 10px;
	}
	.bgColor808695{
		background: #808695;
		position: absolute;
		left: 0;
	}
	.top10{
		top:10px;
	}
	.top100{
		top: 100px;
	}
	.yulanDialogInnerRight {
		width: 100px;
		height: 100%;
		box-sizing: border-box;
		padding: 10px 0;
		position: relative;
	}

	.yulanDialog {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 99999;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.yulanDialogInner {
		width: 90%;
		height: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popups-footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.popups-body {
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 41px 0 50px 0;
		.search-bar {
			width: 90%;
			height: 32px;
			margin: 15px auto;
		}
	}

	.zjmbDialog {
		position: fixed;
		left: 180px;
		width: 350px;
		height: 100%;
		box-sizing: border-box;
		padding-bottom: 50px;
		background: #ededed;
		z-index: 9999;
		.popups-header {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 41px;
			line-height: 40px;
			background-color: #fff;
			box-sizing: border-box;
			border-bottom: 1px solid #b9b9b9;
			border-right: 1px solid #b9b9b9;
			.title {
				font-size: 14px;
				font-weight: 400;
				text-align: center;
				color: #4c4c4c;
			}
		}
	}

	.editor-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;
		height: 100%;
		position: relative;
		overflow: hidden;
		.page-editor-side-bar {
			width: 220px;
			display: flex;
			flex-direction: row;
			position: relative;
			.left {
				width: 180px;
				border-right: 1px solid #b9b9b9;
				.scene-footer {
					display: flex;
					flex-direction: row;
					position: absolute;
					width: 100%;
					height: 50px;
					bottom: 0;
					z-index: 99;
					justify-content: space-between;
					align-items: center;
					background: $primary;
					.iconfont {
						font-size: 18px;
						width: 100%;
						height: 50px;
						line-height: 50px;
						color: $white;
						text-align: center;
						vertical-align: middle;
						cursor: pointer;
					}
				}
			}
			.item {
				position: relative;
			}
		}
		.page-editor-main {
			background: #f0f2f5;
			position: relative;
			width: calc(100% - 500px);
			overflow: auto;
		}
		.el-attr-edit-wrapper {
			position: relative;
			width: 280px;
			padding: 0;
			height: 100%;
		}
	}

	.control-bar-wrapper {
		position: absolute;
		top: -44px;
		left: 0;
		width: 100%;
		text-align: center;
		z-index: 1000;
	}
</style>
<style lang="scss">
	.page-editor {
		.el-dialog {
			position: relative !important;
			.el-dialog__body {
				height: 100% !important;
			}
		}
		.el-dialog__wrapper.elDialog {
			box-sizing: border-box;
			padding: 5% 0%;
			.el-dialog {
				margin-top: 0px !important;
				margin-bottom: 0px !important;
				background: white !important;
			}
			.el-dialog__body {
				height: 100% !important;
				padding: 0px !important;
			}
			.el-dialog__header {
				display: none;
			}
		}
	}
</style>
